
var page = 1;

function c(){
    var p;
    p = new XMLHttpRequest();
    p.onreadystatechange = function(){
        if (p.readyState == 4 && p.status == 200){
            var json = JSON.parse(p.responseText);
            for (var i = 0; i < json.shop.length; i++){
                console.log(json.shop[i]);
                //创建第一个大div
                var left = document.createElement('div');
                console.log(left);
                left.className = "left";
                document.querySelector(".buttom").appendChild(left);
                //创建大div里第一个小div
                var op = document.createElement('div');

                //把大div里第一个小divz追加到大div里
                left.appendChild(op);

                //创建第一个小div里img
                var img = document.createElement('img');
                img.src = json.shop[i].img;
                op.appendChild(img);

                //创建大div里第二个小div
                var po = document.createElement('div');
                left.appendChild(po);
                po.className = "po";

                //创建第二个小div里的a标签
                var a = document.createElement('a');
                a.innerHTML = json.shop[i].p;
                po.appendChild(a);


                //创建第二个小div里的p标签
                var zi = document.createElement('p');
                zi.innerHTML = json.shop[i].percentage;
                po.appendChild(zi);

                //创建第二个小div里 第一个div
                var progress = document.createElement('div');
                po.appendChild(progress);
                progress.className = "progress";
                //第二个小div里 第一个div 在创建一个div
                var yu = document.createElement('div');
                progress.appendChild(yu);
                yu.className = "progress-bar";
                yu.style.width = "4%";

                //创建第二个小div里 第二个div
                var desc = document.createElement('div');
                po.appendChild(desc);
                desc.className = "desc";

                //第二个小div里 第二个div 在创建第一个div
                var percentage = document.createElement('div');
                percentage.innerHTML = json.shop[i].y;
                desc.appendChild(percentage);
                percentage.className = "percentage";

                //第二个小div里 第二个div 在创建第二个div
                var letter = document.createElement('div');
                letter.innerHTML = json.shop[i].letter;
                desc.appendChild(letter);
                letter.className = "letter";

                //创建第二个小div里 第三个div
                var extra = document.createElement('div');
                po.appendChild(extra);
                extra.className = "extra";

                //第二个小div里 第三个div里在创建第一个div
                var yan = document.createElement('div');
                yan.innerHTML = '￥';
                extra.appendChild(yan);
                yan.className = "yan";

                //第二个小div里 第三个div里在创建第二个div
                var cur = document.createElement('div');
                cur.innerHTML = json.shop[i].cur;
                extra.appendChild(cur);
                cur.className = "cur";

                //第二个小div里 第三个div里在创建第三个div
                var price = document.createElement('div');
                price.innerHTML = json.shop[i].price;
                extra.appendChild(price);
                price.className = "price";
            }

        }
    };
    p.open("GET",page + ".json",true);
    p.send();
}

c();

document.querySelector("#btn").addEventListener('click',function(){
    if (page >= 4){
        page = 1;
    }else{
        page++;
    }
    //先清空
    document.querySelector(".buttom").innerHTML = "";
    c();
});